import React from 'react';
import reqwest from 'reqwest';
import classnames from 'classnames';
import Layout from 'components/layout';
import css from './index.less';
import { Link } from 'react-router-dom'
import { Table, Button, Icon } from 'antd';
import { observer, inject, action } from 'mobx-react';
import GoodsModal from './components/goodsModal';

@inject('store')
@observer
class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      modalType: 0, //0 隐藏modal,  1 显示添加商品modal，  2 显示删除商品modal
      modalData: null
    };
    this.selectRow = {};
  }

  columns = [{
    title: 'ID',
    dataIndex: 'p_id',
    key: 'p_id'
  },{
    title: '名称',
    dataIndex: 'p_name',
    key: 'p_name'
  }, {
    title: '起始人数',
    dataIndex: 'p_peopleStart',
    key: 'p_peopleStart'
  }, {
    title: '结束人数',
    dataIndex: 'p_peopleEnd',
    key: 'p_peopleEnd'
  }, {
    title: '起始拥挤程度',
    dataIndex: 'p_crowdStart',
    key: 'p_crowdStart'
  }, {
    title: '结束拥挤程度',
    dataIndex: 'p_crowdEnd',
    key: 'p_crowdEnd'
  }, {
    title: '商品个数',
    dataIndex: 'p_goodsList',
    key: 'p_goodsList',
    render: (text, record) => (
      <div>{record.p_goodsList.length} 个</div>
    )
  },{
    title: '操作',
    dataIndex: 'edit',
    key: 'edit',
    render: (text, record) => (
      <div>
        <Button style={{marginRight: '15px'}} ghost type="primary" shape="circle" icon="shop" size="small" onClick={this.showModal.bind(this, record, 1)}/>
      </div>
    )
  //<Button style={{marginRight: '15px'}} ghost type="primary" shape="circle" icon="edit" size="small" onClick={this.showModal.bind(this, record, 2)}/>
}];

  showModal(palace, type) {
    //type == 0 隐藏modal,  1 显示商品modal，  2 显示修改宫殿modal
    const { store = {}, palaceList } = this.props;
    this.selectRow = palace;
    //console.log(store.getInGoods(palace.p_id));
    this.setState({
      modalType: type,
      modalData: store.getInGoods(palace.p_id)
    })
  }

  changeGoods(hasSelectGoods) {
    //console.log(hasSelectGoods);
    //console.log(this.selectRow);
    const { store = {} } = this.props;
    const { palaceList = []} = store;
    palaceList.forEach(item => {
      if(item.data.p_id == this.selectRow.p_id){
        //console.log('item', item);
        item.updatePalaceGoods({
          p_id: item.data.p_id,
          goodsList: hasSelectGoods
        });
      }
    });
    this.setState({
      modalType: 0,
    })

  }

  changPalace(p_peopleStart, p_peopleEnd, p_crowdStart, p_crowdEnd) {
    console.log(p_peopleStart, p_peopleEnd, p_crowdStart, p_crowdEnd);
    const { store = {} } = this.props;
    const { palaceList = []} = store;
    palaceList.map(item => {
      if(item.data.p_id == this.selectRow.p_id){
        item.updatePalace({
          p_id: item.data.p_id,
          p_peopleStart,
          p_peopleEnd,
          p_crowdStart,
          p_crowdEnd
        });
      }
    });
    this.setState({
      modalType: 0
    });
  }

  addPalace() {
    this.props.store.addPalace();
  }

  render() {
    const cls = classnames([css.layout]);
    const { modalType, modalData } = this.state;
    const { store = {} } = this.props;
    const { palaceList = [], loginState } = store;
    const dataSource = [];
    console.log('palaceList', palaceList);
    palaceList.forEach((item, index) => {
      item.data.key = index;
      dataSource.push(item.data);
    });
    //console.log('palace ===', this.selectRow);
    const modalProps = {
      modalType,
      modalData,
      palace: this.selectRow,
      changeGoods: this.changeGoods.bind(this),
      changPalace: this.changPalace.bind(this)
    };
    return (
      <Layout selected="1" title="宫殿列表">
        <div className={cls}>
          <div className={css.addBox}>
            <Button type="primary" icon="plus" onClick={this.addPalace.bind(this)}>初始化宫殿</Button>
          </div>
          <Table dataSource={dataSource} columns={this.columns} />
        </div>
        <GoodsModal {...modalProps}/>
      </Layout>
    );
  }
}
export default Home;
